import { Component, OnInit, SimpleChanges, EventEmitter, OnChanges, ChangeDetectionStrategy, Input, Output } from '@angular/core';
import { SongSheet } from '@services/data-types/common.type';
import { LikeSongParams } from '@services/member.service';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-wyy-layer-like',
  templateUrl: './wyy-layer-like.component.html',
  styleUrls: ['./wyy-layer-like.component.less'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class WyyLayerLikeComponent implements OnInit, OnChanges {
  creating = false;
  formModel: FormGroup;
  @Input() visible: boolean;
  @Input() likedId: string;
  @Input() mySheets: SongSheet[];
  @Output() onLikeSong = new EventEmitter<LikeSongParams>();
  @Output() createSheet = new EventEmitter<string>();
  constructor(private fb: FormBuilder) {
    this.formModel = this.fb.group({
      sheetName: ['', Validators.required]
    });
  }

  ngOnInit() {
  }
  ngOnChanges(changes: SimpleChanges) {
    const visible = changes.visible;
    // 弹窗关闭后，表单重置
    if (visible && !visible.previousValue) {
      this.creating = false;
      this.formModel.reset();
    }
    // console.log('sheets:', changes.mySheets.currentValue);
  }
  likeSong(pid: string) {
    const args = { pid, tracks: this.likedId };
    this.onLikeSong.emit(args);
  }
  toBack() {
    this.creating = false;
  }
  onSubmit() {
    this.createSheet.emit(this.formModel.get('sheetName').value);
  }
}
